<template>
  <div class="insp">
    <div class="insp-header">
      <div class="flexBetween">
        <div class="flex insp-header-left">
          <el-select v-model="inspType" placeholder="请选择片区" size="small" style="width: 140px;" class="mRight10">
            <el-option v-for="item in inspTypeOpts1" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-input placeholder="请输入桥梁名称" v-model="taskName" size="small" style="width: 180px;" class="mRight10">
          </el-input>
          <el-select v-model="taskStatus" placeholder="请选择维修状态" size="small" style="width: 140px;" class="mRight10"
                     clearable>
            <el-option v-for="item in taskStatusOpts" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-select v-model="taskType" placeholder="请选择验收结果" size="small" style="width: 140px;" class="mRight10"
                     clearable>
            <el-option v-for="item in taskTypesOpts1" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" style="width:200px;"
                          v-model="taskTime" type="datetime" size="small" placeholder="请选择处理时间" class="mRight10" clearable>
          </el-date-picker>

          <!--新加的-->
          <el-select v-model="projectType" placeholder="请选择工程性质" size="small" style="width: 140px;" class="mRight10"
                     clearable>
            <el-option v-for="item in projectTypeOpts" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>

          <el-button type="primary" size="small" @click="queryForPage(1)">
            查询
          </el-button>
        </div>
        <div class="insp-header-right">
          <el-button size="small" class="insp-btn-add" icon="el-icon-plus" @click="handleAdd">新增大中修</el-button>
        </div>
      </div>
    </div>

    <div class="insp-content">
      <div class="insp-table">
        <el-table :data="tableData" stripe :header-cell-style="{
          background: '#8595B9',
          color: '#fff',
          height: '44px',
        }" max-height="660px">
          <el-table-column prop="dzxdh" label="大中修单号" show-overflow-tooltip></el-table-column>
          <el-table-column prop="qlmc" label="桥梁名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="zygzl" label="主要工作量" show-overflow-tooltip></el-table-column>
          <el-table-column prop="wxzt" label="维修状态" show-overflow-tooltip></el-table-column>
          <el-table-column prop="gcxz" label="工程性质" show-overflow-tooltip></el-table-column>
          <!--<el-table-column property="inspType" label="主要工程量" width="100">
            <template slot-scope="scope">
              <label :class="['insp-table-label', inspTypeClass(scope.row.inspType)]">
                {{ inspTypeText(scope.row.inspType) }}
              </label>
            </template>
          </el-table-column>-->
          <!--<el-table-column label="维修状态" property="staFlag" show-overflow-tooltip>
            <template slot-scope="scope">
              <label :class="['insp-table-label', taskStatusClass(scope.row.staFlag)]">
                {{ taskStatusText(scope.row.staFlag) }}
              </label>
            </template>
          </el-table-column>-->
          <!--<el-table-column property="inspType" label="工程类型" width="100">
            <template slot-scope="scope">
              <label :class="['insp-table-label', inspTypeClass(scope.row.inspType)]">
                {{ inspTypeText(scope.row.inspType) }}
              </label>
            </template>
          </el-table-column>-->
          <el-table-column prop="kssj" label="开始时间" show-overflow-tooltip></el-table-column>
          <el-table-column prop="jssj" label="结束时间" show-overflow-tooltip></el-table-column>
          <el-table-column prop="dzxfzr" label="大中修负责人" show-overflow-tooltip></el-table-column>

          <el-table-column label="过程跟踪" property="staFlag" show-overflow-tooltip>
            <!--<el-tooltip content="查看">
              <el-button type="text"  @click="handelEdit(scope.row.id)">
                查看
              </el-button>
            </el-tooltip>-->
            <el-popover
              placement="right"
              width="230"
              trigger="click">
              <el-table :data="gridData">
                <el-table-column width="100" property="date" label="日期"></el-table-column>
                <el-table-column width="100" property="name" label="进度"></el-table-column>
              </el-table>
              <el-button slot="reference">查看</el-button>
            </el-popover>
          </el-table-column>

          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-tooltip content="反馈">
                <el-button type="text" icon="el-icon-thumb" @click="addFeedback(scope.row.id)">
                </el-button>
              </el-tooltip>
              <el-tooltip content="任务验收">
                <el-button type="text" icon="el-icon-circle-check" @click="handelTaskStatus(scope.row.id)">
                </el-button>
              </el-tooltip>
              <el-tooltip content="编辑">
                <el-button type="text" icon="el-icon-edit-outline" @click="handelEdit(scope.row.id)">
                </el-button>
              </el-tooltip>
              <el-tooltip content="删除">
                <el-button type="text" icon="el-icon-delete" style="color: red !important;"
                           @click="handelDelete(scope.row.id)">
                </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="insp-page">
        <el-pagination background  :current-page.sync="currentPage"
                       :hide-on-single-page="false" @current-change="handlePageChange" :page-size="pageSize" :total="recordsTotal">
        </el-pagination>
      </div>

    </div>
    <!--查看过程跟踪-->
 <!--   <vx-popup
      :title="groupTitle"
      width="410px"
      @close="pontinecancel"
      :active.sync="addVisible"
      @confirmPopup="pontineAdd"
      @cancelPopup="pontinecancel"
    >
      <el-form
        :model="addForm"
        :rules="addRules"
        ref="addForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="桥组名称:" prop="groupName">
          <el-input v-model.trim="addForm.groupName" size="small" clearable placeholder="请输入桥组名称"></el-input>
        </el-form-item>
        <el-form-item label="桥组编号:" prop="code">
          <el-input v-model.trim="addForm.code" size="small" clearable placeholder="请输入桥组编号"></el-input>
        </el-form-item>
      </el-form>
    </vx-popup>-->
    <!--反馈-->
    <vx-popup :title="feedback" width="880px" @close="cancelFeedback" :active.sync="feedbackVisible"
              @confirmPopup="handleFeedbackSubmit" @cancelPopup="cancelFeedback">

      <div class="feedback">
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item title="维修前" name="1">
            <div>
              <div class="left">
                <h1>滨江大桥</h1>
                <h2>主梁破损</h2>
                <h3>工程量面积: 3cm</h3>
              </div>
              <div class="right">
                <el-upload :action="uploadUrl" list-type="picture-card" :file-list="fileList"
                           accept=".jpg,.jpeg,.png,.gif,.JPG,.JPEG,.PNG" :on-preview="handlePictureCardPreview"
                           :on-remove="handlePictureCardRemove" :on-success="handlePictureCardSuccess" :data="uploadParams">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogImgVisible" custom-class="image">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
              </div>
            </div>
          </el-collapse-item>
          <el-collapse-item title="维修中" name="2">
            <div>
              <div class="left">
                <h1>滨江大桥</h1>
                <h2>主梁破损</h2>
                <h3>面积修复了: 2cm</h3>
              </div>
              <div class="right">
                <el-upload :action="uploadUrl" list-type="picture-card" :file-list="fileList"
                           accept=".jpg,.jpeg,.png,.gif,.JPG,.JPEG,.PNG" :on-preview="handlePictureCardPreview"
                           :on-remove="handlePictureCardRemove" :on-success="handlePictureCardSuccess" :data="uploadParams">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogImgVisible" custom-class="image">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
              </div>
            </div>
          </el-collapse-item>
          <el-collapse-item title="维修后" name="3">
            <div>
              <div class="left">
                <h1>滨江大桥</h1>
                <h2>主梁破损</h2>
                <h3>修复完成</h3>
              </div>
              <div class="right">
                <el-upload :action="uploadUrl" list-type="picture-card" :file-list="fileList"
                           accept=".jpg,.jpeg,.png,.gif,.JPG,.JPEG,.PNG" :on-preview="handlePictureCardPreview"
                           :on-remove="handlePictureCardRemove" :on-success="handlePictureCardSuccess" :data="uploadParams">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogImgVisible" custom-class="image" >
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </vx-popup>

    <!-- 新增/编辑任务-->
    <addMaintance ref="addInspTaskChild" @closeAddInspTask="handleClose" :createType='4'></addMaintance>
  </div>
</template>
<script>
  import addMaintance from "./addMaintance";
  export default {
    data() {
      return {
        tableData: [
          {
            dzxdh: '20210327001',
            qlmc: '滨江大桥',
            zygzl: '栏杆涂层20M',
            wxzt: '已处理',
            gcxz: '大修',
            kssj: '2021-03-27',
            jssj: '2021-03-28',
            dzxfzr: '王浩',
          },{
            dzxdh: '20210328002',
            qlmc: '滨江大桥',
            zygzl: '栏杆涂层30M',
            wxzt: '已处理',
            gcxz: '大修',
            kssj: '2021-03-28',
            jssj: '2021-03-30',
            dzxfzr: '严斌',
          },{
            dzxdh: '20210401003',
            qlmc: '城闸大桥',
            zygzl: '人行道修复20个',
            wxzt: '已处理',
            gcxz: '大修',
            kssj: '2021-04-01',
            jssj: '2021-04-05',
            dzxfzr: '陆建军',
          },{
            dzxdh: '20210406004',
            qlmc: '城闸大桥',
            zygzl: '人行道修复30个',
            wxzt: '已处理',
            gcxz: '大修',
            kssj: '2021-04-06',
            jssj: '2021-04-10',
            dzxfzr: '顾娟',
          },{
            dzxdh: '20210411005',
            qlmc: '滨江大桥',
            zygzl: '栏杆涂层40M',
            wxzt: '已处理',
            gcxz: '大修',
            kssj: '2021-4-11',
            jssj: '2021-4-17',
            dzxfzr: '黄张宇',
          },{
            dzxdh: '20210414006',
            qlmc: '城闸大桥',
            zygzl: '栏杆涂层20M',
            wxzt: '已处理',
            gcxz: '大修',
            kssj: '2021-4-14',
            jssj: '2021-4-18',
            dzxfzr: '单俊君',
          }],
        feedback: '反馈',
        feedbackVisible: false,
        activeNames: ['1'],

        gridData: [{
          date: '2021-03-27',
          name: '发起',

        }, {
          date: '2021-03-27',
          name: '开始维修',
        }, {
          date: '2021-03-28',
          name: '完成维修',
        }, {
          date: '2021-03-28',
          name: '验收合格',
        }],
        pageSize: 14,
        currentPage: 1,
        recordsTotal: 0,
        taskName: '',
        taskTime: '',
        inspType: '',
        taskStatus: '',
        taskType: '',

        projectType: '',
        projectTypeOpts:[
          {
            label: '大修',
            value: 0
          }, {
            label: '中修',
            value: 1
          }
          , {
            label: '综合整治',
            value: 2
          }
        ],

       /* tableData: [],*/
        inspTypeOpts: [
          {
          label: '日常巡检',
          value: 0
        }, {
          label: '定期巡检',
          value: 1
        }
          // , {
          //   label: '特殊巡检',
          //   value: 2
          // }
        ],
        taskStatusOpts: [
          {
          label: '待处理',
          value: 0
        },
          {
          label: '处理中',
          value: 1
        },
          {
          label: '已处理',
          value: 2
        }],
        taskTypesOpts: [{
          label: '模板任务',
          value: 1
        },
          //  {
          //   label: '定时任务',
          //   value: 2
          // },
          {
            label: '快速任务',
            value: 3
          }, {
            label: '临时任务',
            value: 4
          }
        ],

        dialogDetailVisible: false,
        activeDetailName: "basicInfo",
        detailGroup: [{
          name: "取消",
          type: "border",
          funName: "cancelDetail"
        }],

      };
    },
    components: {
      addMaintance
    },
    watch: {
      '$route'(to, from) {
        this.queryForPage(1);
      }
    },
    created() {
      this.queryForPage(1);
    },
    methods: {
      /*反馈*/
      cancelFeedback() {
        this.feedbackVisible = false;
      },
      addFeedback() {
        this.feedbackVisible = true;
      },
      handleChange(val) {
        console.log(val);
      },


      handleAdd() {
        this.$refs.addInspTaskChild.add();
      },
      handelDelete(val) {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.insp.deleteTask(val).then(response => {
            if (response.data.success) {
              this.$vs.notify({
                text: '删除成功',
                color: "success",
                icon: "success"
              })
              let maxPage = Math.ceil((this.recordsTotal - 1) / this.pageSize);
              if (this.currentPage > maxPage) {
                this.currentPage = maxPage
              }
              this.handlePageChange(this.currentPage);
            } else {
              this.$vs.notify({
                text: "删除失败",
                color: "danger"
              })
            }
          })
        }).catch(() => {
          this.$vs.notify({
            text: "已取消删除",
            color: "primary"
          })
        });
      },
      handelEdit(val) {
        this.$refs.addInspTaskChild.edit(val);
      },
      handelTaskStatus(val) {
        this.$confirm('此操作将结束任务, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.insp.editTaskStatus(val, 2).then(response => {
            if (response.data.success) {
              this.$vs.notify({
                text: '任务结束成功',
                color: "success",
                icon: "success"
              })
              this.queryForPage(1);
            } else {
              this.$vs.notify({
                text: "任务结束失败",
                color: "danger"
              })
            }
          })
        }).catch(() => {
          this.$vs.notify({
            text: "已取消",
            color: "primary"
          })
        });
      },
      queryForPage(pageIndex) {
        let _userInfo = JSON.parse(localStorage.getItem("userInfo"));
        if (pageIndex && pageIndex === 1) {
          this.currentPage = 1;
        }
        const _params = {
          pageSize: this.pageSize,
          pageNum: this.currentPage,
          data: {
            name: this.taskName,
            staFlag: this.taskStatus,
            createType: this.taskType,
            sdt: this.taskTime || '',
            userId: _userInfo['userid'] || ''
          }
        }
       /* this.$api.insp.queryTaskPage(_params).then(response => {
          if (response.data.success) {
            this.tableData = response.data.data || [];
            this.recordsTotal = response.data.recordsTotal;
          }
        });*/
      },
      handlePageChange(currentPage) {
        this.currentPage = currentPage;
        this.queryForPage();
      },
      handleClose() {
        this.queryForPage(1);
      },
      inspPersonText(list) {
        let _text = '';
        list.forEach((item, index) => {
          if (!index) {
            _text += item.userName
          } else {
            _text += `、${item.userName}`
          }
        });
        return _text;
      },
      inspStandardText(type) {
        switch (type) {
          case 0:
            return '城市桥梁';
          case 1:
            return '道路桥梁';
        }
      },
      taskTypeText(type) {
        switch (type) {
          case 1:
            return '模板任务';
          case 2:
            return '定时任务';
          case 3:
            return '快速任务';
          case 4:
            return '临时任务';
        }
      },
      inspTypeClass(type) {
        switch (type) {
          case 0:
            return 'inspTypeA';
          case 1:
            return 'inspTypeB';
          case 2:
            return 'inspTypeC';
        }
      },
      inspTypeText(type) {
        switch (type) {
          case 0:
            return '日常巡检';
          case 1:
            return '定期巡检';
          case 2:
            return '特殊巡检';
        }
      },
      taskStatusClass(type) {
        switch (type) {
          case 1:
            return 'planStatusA';
          case 2:
            return 'planStatusB';
          case 3:
            return 'planStatusC';
          case 4:
            return 'planStatusD';
          case 5:
            return 'planStatusB';
          case 6:
            return 'planStatusC';
        }
      },
      taskStatusText(type) {
        switch (type) {
          case 0:
            return '计划中';
          case 1:
            return '进行中';
          case 2:
            return '已完成';
        }
      },

      handleTabDetailClick(tab, event) {
        this.activeDetailName = tab.name;
      },

    },
  };

</script>
<style scoped lang="scss">
  @import '../../inspection/insp';
  .feedback{
    .right{
      width: 30%;
      float: right;
    }
    .left{
      padding: 30px;
      width: 30%;
      float: left;
    }
  }

  /deep/.el-table__header tr,
  /deep/.el-table__header th {
    padding: 0;
    height: 44px;
  }

  /deep/.el-table td,
  /deep/.el-table th {
    text-align: center;
    font-size: 14px;
  }

  /deep/.el-table th {
    font-weight: 500;
    color: #fff;
  }

  /deep/.el-table td {
    font-weight: 400;
    color: #444;
    padding: 0;
    height: 44px;
    line-height: 44px;
  }

  /deep/.el-table--striped .el-table__body tr.el-table__row--striped td {
    background: #F1F5FC;
  }

  /deep/.el-table__expanded-cell {
    padding: 20px !important;
  }

  /deep/.el-button--mini.insp-task-addBtn {
    padding: 6px;
    font-size: 18px;
    font-weight: bolder;
  }



  /deep/.insp-plan-detailTabs .el-tabs__header {
    padding: 0;
    margin: -20px 0 0;
    background: #fff;
  }

  /deep/.insp-plan-detailTabs .el-tabs__item {
    font-size: 14px;
    font-weight: 400;
    color: #999;
    position: relative;

    text-align: center;
  }

  /deep/.insp-plan-detailTabs .el-tabs__active-bar {
    width: 12px !important;
    background-color: #327BDC;

    left: 28px;
    margin-left: -6px;
  }

  /deep/.insp-plan-detailTabs .el-tabs__content {
    min-height: 250px;
  }

  /deep/.el-tabs__item.is-active {
    color: #327BDC;
  }

</style>
